<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue'

  import { requestGetReportList } from '@/api/system/ysys-user/report'
  import { HttpCodeEnum } from '@/enum/httpEnum'
  import { microbiotaPng,reportPng } from '@/enum/imageEnum'
  import { isImage, openDocument } from '@/utils/util'
  const reportList: any = ref([])
  onMounted(async () => {
    const { responseCode, responseData } = await requestGetReportList({})
    if (responseCode === HttpCodeEnum.SUCCESS) {
      reportList.value = responseData
    }
  })
  const goDetail = (item: any) => {
    if (!item.extInfo) {
      uni.showToast({ title: '暂无上传报告', icon: 'none' })
      return
    }
    if(item.dataType===2){
      uni.navigateTo({
            url: `/pages/detection/preview?publishId=${item.publishPaperId}&recordID=${item.extInfo}`,
          })
      return
    }
    if (isImage(item.extInfo)) {
      uni.navigateTo({ url: `/pages/sys/reportDetail?reportUrl=${item.extInfo}` })
    } else {
      openDocument(item.extInfo)
    }
  }
</script>
<template>
  <view class="content">
    <view class="item" v-for="item in reportList" :key="item.blockchainCode" @click="goDetail(item)">
      <image class="item-img" :src="item.staticUrl" />
      <view class="title-outer">
        <view class="title ellipsis-line-2">{{ item.fileName }}</view>
        <view class="time">{{ item.createdTime }}</view>
      </view>
      <image class="right-arrow" src="@/assets/right-arrow.png" />
    </view>
    <view class="no-data" v-if="!reportList.length">
      <image class="img" :src="reportPng.noData" mode="widthFix" />
      <view class="text">暂无上传报告</view>
    </view>
  </view>
</template>
<style lang="less" scoped>
  .content {
    height: 100vh;
    padding-bottom: 50rpx;
    overflow-y: scroll;
    background-color: #f1f3f5;

    .item {
      display: flex;
      align-items: center;
      height: 240rpx;
      padding: 32rpx;
      margin: 32rpx 32rpx 0;
      background: linear-gradient(180deg, #fff 0%, #fff 100%);
      border-radius: 32rpx;

      .item-img {
        width: 176rpx;
        height: 176rpx;
        border-radius: 16rpx;
        flex-shrink: 0;
      }

      .title-outer {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        height: 176rpx;
        padding: 0 32rpx;

        .title {
          font-size: 32rpx;
          line-height: 48rpx;
          color: #1d2129;
        }

        .time {
          font-size: 24rpx;
          color: #4e5969;
        }
      }

      .right-arrow {
        width: 32rpx;
        height: 32rpx;
      }
    }
    .no-data{
      text-align: center;
      margin-top: 200rpx;
      .text{
        font-size: 32rpx;
        color: #4e5969;
      }
    }
  }
</style>
